Mouse click 이벤트

1
2
3
4
5
6
7
8
9
10
11
import { Component } from '@angular/core';
@Component({
  templateUrl: '<button ion-button (click)="onClick()>버튼</button>'
})
export class TabsPage {
  constructor() {
  }
  onClick() {
    alert('dd');
  }
}

Mousemove, mouseleave, mouse over 이벤트 동작

지시자 선언

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {
  private el: HTMLElement;
  constructor(el: ElementRef) {
    this.el = el.nativeElement;
    this.el.style.fontSize = "30px";
  }
  @HostListener('mousemove') onMouseMove() {
    this.el.style.backgroundColor = "blue";
    this.el.style.color ="white";
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.el.style.backgroundColor = null;
    this.el.style.color ="black";
  }
}

템플릿

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Component } from '@angular/core';

@Component({
  selector: 'member-list',
  template: ` 
  <div highlight (mouseover)="setLike('like this')">
    {{like}}  
  </div>`
})
export class MemberListComponent {
  like: string;

  setLike(likethis: string){
    this.like = likethis;
  }
}

Key 이벤트

특정 키의 이벤트시 동작하는 이벤트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Component({
  selector: 'key-up4',
  template: `
    <input #box
      (keyup.enter)="update(box.value)"
      (blur)="update(box.value)">

    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v4 {
  value = '';
  update(value: string) { this.value = value; }
}

그외 이벤트 정보 : https://developer.mozilla.org/en-US/docs/Web/Events

Reference

쉽고 빠르게 배우는 Angular2 프로그래밍 - 정진욱

https://angular.io/guide/user-input